<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> CSS布局模型 </title>
    <style type="text/css">
        h2 {
            color: black;
            background: green;
        }

        #box1 {
            width: 300px;
            height: 100px;
        }

        div, h1, p {
            border: 1px solid red;
        }

        #div1, #div2, #div3 {
            width: 200px;
            height: 200px;
            border: 2px red solid;
            float: left;
        }

        .div_absolute {
            width: 200px;
            height: 200px;
            border: 2px red solid;
            /*left:100px;*/
            /*top:50px;*/
            position: absolute;
            margin-left: 20px;
            /*这是设定TRBL之后的效果(设置TRBL以浏览器左上角为原点)，当没有设置TRBL时（没有设置TRBL是以父级对象的坐标为原点）*/
        }

        .div_relative {
            width: 200px;
            height: 200px;
            border: 2px red solid;
            position: relative;
            left: 300px;
            top: 20px;

        }

        .div_fixed {
            width: 200px;
            height: 200px;
            border: 2px red solid;
            position: fixed;
            left: 100px;
            top: 50px;
            /*因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响
             现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。*/
        }


        #box111{
            width:200px;
            height:200px;
            position:relative;
        }

        #box222{
            position:absolute;
            top:20px;
            left:50px;
        }
    </style>
</head>
<body>
<!--============================分割线===============================-->
<h2>布局模型</h2>
<div>
    在网页中，元素有三种布局模型：
    1、流动模型（Flow）
    2、浮动模型 (Float)
    3、层模型（Layer）
</div>


<!--============================分割线===============================-->
<h2>流动模型 ，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。</h2>
<div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->


<!--============================分割线===============================-->
<h2>浮动模型 </h2>


<div id="div1"> div111111111</div>
<div id="div2"> div222222</div>
<div id="div3">div33333333333</div>


<!--============================分割线===============================-->
<h2 style="clear: left">层模型:。定位（positioning属性来支持层布局模型 1、绝对定位(absolute)2、相对定位( relative)3固定定位(fixed)</h2>


<!--============================分割线===============================-->
<h2>绝对定位(absolute)</h2>
<!--作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个
具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。-->

<div style="border: 2px solid #13ff49 ; width: 600px ;height: 600px ">
    <div class="div_absolute">
        这里演示绝对定位
    </div>
</div>

<!--============================分割线===============================-->
<h2>相对定位relative</h2>
<!--它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，
然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。-->

<div class="div_relative">
    相对定位relative
</div>


<!--============================分割线===============================-->
<h2>固定定位fixed</h2>

<div class="div_fixed"></div>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>

<!--============================分割线===============================-->
<h2>Relative与Absolute组合使用</h2>


<!--使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，
大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以 使用position:relative来帮忙-->
<div id="box111"><!--参照定位的元素-->
    <div id="box222">相对参照元素进行定位</div><!--相对定位元素-->
</div>
</body>
</html>